import React from 'react';
import { Form, Input, Button, message, Row, Col } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import '../../style/customize/login.less';
import { reqLogin } from '../../api/index';
import memoryUtils from '../../utils/memoryUtils';
import storegeUtils from '../../utils/storegeUtils';
import { Redirect } from 'react-router-dom';

export default class Login extends React.Component {
  onFinish = (values: any) => {
    const { username, password } = values;
    reqLogin({ username, password }).then((res: any) => {
      if (res.verifySuccess) {
        memoryUtils.userInfo = res.userInfo; // 保存到内存中
        storegeUtils.saveUser(res.userInfo); // 保存到本地中
        message.success('登陆成功！');
        (this.props as any).history.replace('/app/dashboard');
      } else {
        message.error('账号密码错误，请检查！');
      }
    });
  };
  /* onFinishFailed = errorInfo => {
    console.log("Failed", errorInfo);
  };*/

  onFinishFailed = () => {};

  render() {
    /* if (memoryUtils.userInfo) {
      return <Redirect to="/app/dashboard"></Redirect>;
    } */

    return (
      <div className="login-container">
        <div className="login-sc-container">
          <Form
            name="basic"
            className="relative z-10 sc-form"
            onFinish={this.onFinish}
            onFinishFailed={this.onFinishFailed}
          >
            <Form.Item>
              <Row className="login-form-title">
                <Col span={24}>登 &ensp; 录</Col>
              </Row>
            </Form.Item>
            <Form.Item
              name="username"
              className="sc-login-form-item"
              rules={[
                { required: true, message: '请输入用户名!' },
                { min: 4, message: '用户名至少4位！' },
                { max: 18, message: '用户名至多18位！' },
                {
                  pattern: /^[A-Za-z0-9_]+$/,
                  message: '必须是英文字母数字或下划线',
                },
              ]}
            >
              <Input
                prefix={<UserOutlined className="site-form-item-icon" />}
                placeholder="用户名"
              />
            </Form.Item>
            <Form.Item
              name="password"
              className="sc-login-form-item"
              rules={[
                { required: true, message: '请输入密码!' },
                { min: 4, message: '密码至少4位！' },
                { max: 18, message: '密码至多18位！' },
                { pattern: /^[A-Za-z0-9]+$/, message: '必须是英文字母数字' },
              ]}
            >
              <Input.Password
                prefix={<LockOutlined className="site-form-item-icon" />}
                placeholder="密码"
              />
            </Form.Item>
            <Form.Item>
              <Button type="primary" htmlType="submit" size="large">
                登录
              </Button>
            </Form.Item>
          </Form>
        </div>

        <ul className="sc-bg-bubbles">
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
        </ul>
      </div>
    );
  }
}
